<template>
  <div id="bindPhone_container">
    <div class="bindPhone-wrap">
      <Return title="绑定手机号"></Return>
      <div class="form-body">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
          <el-form-item prop="phone" class="custom-item">
            <el-input
              class="custom-input"
              placeholder="请输入手机号"
              v-model="ruleForm.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="securityCode" class="custom-input">
            <el-input
              v-model="ruleForm.securityCode"
              autocomplete="off"
              placeholder="请输入验证码"
            ></el-input>
            <button class="vcode" type="button" @click="RandomCode">
              获取验证码
            </button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "BindPhone",
  data() {
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.ruleForm.securityCode) {
        callback(new Error("验证码错误，请重新输入"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        phone: "",
        securityCode: "",
      },
      vcode: '',
      rules: {
        securityCode: [{ validator: validateCode, trigger: "blur" }],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      // 校验
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let reqData = {
            id: this.$store.state.userAbout.user_id || JSON.parse(localStorage.getItem('userInfo')).id,
            phone: this.ruleForm.phone,
          };
          this.BindPhone(reqData);
          this.ruleForm.phone = ''
          this.ruleForm.securityCode = ''
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 生成随机验证码
    RandomCode() {
      if (
        !(
          this.ruleForm.phone !== "")
      ) {
        this.$message({ type: "warning", message: "请输入手机号" });
        return false;
      }
      const charactors = "1234567890";
      for (let index = 0; index <= 4; index++) {
        let i = parseInt(10 * Math.random());
        this.vcode += charactors.charAt(i);
      }
      this.$message({ type: "success", message: "验证码：" + this.vcode });
      // 倒计时
      let vcodeText = document.querySelector(".vcode");
      let num = 10;
      vcodeText.disabled = true;
      vcodeText.style.opacity = 0.6;
      vcodeText.innerHTML = "获取验证码(" + num + ")";
      var timer = setInterval(() => {
        num--;
        vcodeText.innerHTML = "获取验证码(" + num + ")";
        if (num === 0) {
          vcodeText.disabled = false;
          vcodeText.style.opacity = 1;
          vcodeText.innerHTML = "获取验证码";
          this.vcode = "";
          clearInterval(timer);
        }
      }, 1000);
    },
    ...mapActions("userAbout", ["BindPhone"]),
  },
};
</script>

<style lang="scss" scoped>
#bindPhone_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .bindPhone-wrap {
    width: 348px;
    margin: auto;
    .form-body {
      .vcode {
        border: none;
      }
    }
  }
}
</style>>